<template>
	<view class="payment">
		<view class="payment-top">
			<view>
				<view class="payment-top-text">
					<text>10</text>元
				</view>
				<view class="p">北大建华路335号</view>
			</view>
		</view>
		<view class="payment-Xian">
			<view class="payment-Xian-l"></view>
			<view>订单详情</view>
			<view class="payment-Xian-r"></view>
		</view>

		<view class="payment-List">
			<view class="payment-List-item">
				<view>车牌号</view>
				<view>粤E-00008</view>
			</view>
			<view class="payment-List-item">
				<view>入场时间</view>
				<view>2022-02-28 09:59:34</view>
			</view>
			<view class="payment-List-item">
				<view>出场时间</view>
				<view>2022-02-28 15:59:34</view>
			</view>
			<view class="payment-List-item">
				<view>时长</view>
				<view>2小时56分</view>
			</view>
			<view class="payment-List-item">
				<view>订单总金额</view>
				<view>10元</view>
			</view>
		</view>

		<view class="add_suggest_btn" @click="shadeAdd">去处理</view>
		<view class="add_suggest_btn ggg" @click="navigateBack">返回</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
let navigateBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.payment {
	height: calc(100vh - 90rpx);
	background-color: #f2f2f2;
	overflow: hidden;
	padding: 0 30rpx;
	box-sizing: border-box
}

.payment-top {
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 60rpx;

	.payment-top-text {
	 font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		text{
			font-size: 50rpx;
			margin-right: 10rpx;
		}
	}
	.p{
		font-size: 24rpx;
		color: rgb(123,123,123);
	}
}
.payment-Xian{
	position: relative;
	margin-top: 60rpx;
	text-align: center;
	font-size: 24rpx;
	color: rgb(123,123,123);
}
.payment-List{
	// padding: 0 30rpx;
	margin-top: 30rpx;
	border-bottom: 1rpx solid #bcbcbc;
	.payment-List-item{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		
		font-size: 24rpx;
		color: rgb(123,123,123);
	}
}
.add_suggest_btn {
	margin-top: 30rpx !important;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	color: #fff;
	width: 98%;
	margin: 20rpx auto;
	background-color: #02a7f0;
	border-radius: 30rpx;
}
.ggg {
	background-color: #c5c5c5 !important;
}

.payment-Xian-l::after{
	content: '';
	width: 35%;
	height: 2rpx;
	background-color: #bcbcbc;
	position: absolute;
	top: 50%;
	left: 0;
	// transform: translateY(-50%);
}
.payment-Xian-r::after{
	content: '';
	width: 35%;
	height: 2rpx;
	background-color: #bcbcbc;
	position: absolute;
	top: 50%;
	right: 0;
}
</style>
